<template>
  <div style="float:left;margin:0px;margin-left:10px;padding:0px;border:1px solid red">
    <menu-unfold-outlined
     v-if="collapsed"
     class="trigger"
     @click="changeStatus"
   
   />
   <menu-fold-outlined v-else class="trigger" @click="changeStatus"  />
   权限管理
   </div>
</template>

<script setup lang="ts">
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined
} from '@ant-design/icons-vue';
import { ref,defineProps, defineEmits } from 'vue';
interface Props {
  collapsed: boolean
}
interface Emits {
  (e: 'changeStatus'): void
}

const props=defineProps<Props>();
const collapsed=ref<boolean>(props.collapsed);

let emit = defineEmits<Emits>();
//触发父组件的changeStatus方法
const changeStatus=()=>{
  collapsed.value=!collapsed.value;
  emit('changeStatus');
}

// import { computed } from 'vue';
// import { useStore } from '@/store';
// const store = useStore();
// const head = computed(()=> store.state.users.infos.head)
// const name = computed(()=> store.state.users.infos.name)
// const handleLogout = () => {
//   store.commit('users/clearToken')
//   setTimeout(()=>{
//     window.location.replace('/login')
//   }, 500)
// }
</script>

<style>

</style>